<template>
    <div class="collection-view">
        <a-card :title="$t('collection')" :bordered="false">
            <a-tabs v-model:activeKey="activeTab">
                <a-tab-pane v-for="star in [1, 2, 5]" :key="star" :tab="`${star}星`">
                    <a-list :data-source="setsByStar[star]" item-layout="horizontal">
                        <template #renderItem="{ item }">
                            <a-list-item @click="showSetDetail(item.setId)">
                                <a-list-item-meta>
                                    <template #avatar>
                                        <PictureOutlined style="font-size: 24px;"/>
                                    </template>
                                    <template #title>
                                        {{ cardConfig.sets[item.setId].name }}
                                    </template>
                                    <template #description>
                                        {{ $t('collectCount') }}: {{
                                            gameStore.playerData.collections[item.setId] || 0
                                        }}
                                    </template>
                                </a-list-item-meta>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <a-drawer
            :title="$t('setDetail')"
            placement="right"
            :visible="drawerVisible"
            @close="drawerVisible = false"
            width="400"
        >
            <div v-if="selectedSet">
                <h3>{{ cardConfig.sets[selectedSet.setId].name }}</h3>
                <div class="pyramid">
                    <a-row v-for="[value, cards] in pyramidCards" :key="value" justify="center" :gutter="8">
                        <a-col v-for="cardId in cards" :key="cardId" :span="6">
                            <a-card size="small" class="card-container">
                                <img
                                    :src="cardConfig.cards[cardId]?.image || 'https://via.placeholder.com/50'"
                                    alt="卡片图片"
                                    class="card-image"
                                />
                                <p>{{ cardConfig.cards[cardId]?.name || cardId }}
                                    ({{ cardConfig.cards[cardId]?.value || '未知' }})</p>
                            </a-card>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </a-drawer>
    </div>
</template>

<script setup>
import {computed, ref} from 'vue'
import {PictureOutlined} from '@ant-design/icons-vue'
import {useGameStore} from '../stores/game'
import cardConfig from '../config/cards.json'
import {useI18n} from 'vue-i18n'

const {t} = useI18n()
const gameStore = useGameStore()
const activeTab = ref('1')
const drawerVisible = ref(false)
const selectedSet = ref(null)

const getStarRating = (setId) => {
    const cardCount = cardConfig.sets[setId].cards.length
    if (cardCount <= 5) return 1
    if (cardCount <= 7) return 2
    return 5
}

const setsByStar = computed(() => {
    const result = {1: [], 2: [], 5: []}
    Object.entries(cardConfig.sets).forEach(([setId, set]) => {
        const star = getStarRating(setId)
        result[star].push({setId, cards: set.cards})
    })
    return result
})

const pyramidCards = computed(() => {
    if (!selectedSet.value || !Array.isArray(selectedSet.value.cards)) return []
    const cards = selectedSet.value.cards
    const grouped = {}
    cards.forEach(cardId => {
        const value = cardConfig.cards[cardId]?.value || 0
        grouped[value] = grouped[value] || []
        grouped[value].push(cardId)
    })
    return Object.entries(grouped).sort((a, b) => Number(b[0]) - Number(a[0]))
})

const showSetDetail = (setId) => {
    selectedSet.value = {setId, cards: cardConfig.sets[setId].cards} // 确保传入 cards 数组
    drawerVisible.value = true
}
</script>

<style scoped>
.collection-view {
    padding: 0;
}

.pyramid {
    text-align: center;
}

.pyramid .ant-row {
    margin-bottom: 8px;
}

.card-container {
    padding: 0;
}

.card-image {
    width: 100%;
    object-fit: cover;
    margin-bottom: 4px;
}
</style>